<template>
	<div>
		<div class="div">
			<el-button
				type="success"
				size="small"
				@click="exportExcel"
			><i class="el-icon-share"></i> {{btnText}}</el-button>
		</div>
		<el-table
			id="table"
			:data="tableData"
			style="width: 100%"
			height="17rem"
		>
			<el-table-column
				prop="number"
				label="编号"
				align="center"
			>
			</el-table-column>
			<el-table-column
				prop="date"
				label="日期"
				align="center"
			>
			</el-table-column>
			<el-table-column
				prop="name"
				label="姓名"
				align="center"
			>
			</el-table-column>
			<el-table-column
				prop="address"
				label="地址"
				align="center"
			>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import XLSX from 'xlsx'
	import FileSaver from 'file-saver'

	export default {
		data() {
			return {
				btnText: '导出',
				tableData: [
					{
						number: 1,
						date: '2016-05-02',
						name: '王小虎',
						address: '北京市朝阳区金沙江路 18 弄'
					},
					{
						number: 2,
						date: '2016-05-04',
						name: '张镇',
						address: '上海市普陀区金沙江路 118 弄'
					},
					{
						number: 3,
						date: '2016-05-01',
						name: '田小雨',
						address: '上海市普陀区金沙江路 318 弄'
					},
					{
						number: 4,
						date: '2016-05-03',
						name: '吴浩然',
						address: '湖北省武汉市洪山区 100 弄'
					},
					{
						number: 5,
						date: '2018-07-03',
						name: '周旋',
						address: '陕西省西安市未央区 100 弄'
					},
					{
						number: 6,
						date: '2019-01-01',
						name: '王文艳',
						address: '甘肃省平凉市会宁县 120 弄'
					},
					{
						number: 7,
						date: '2018-11-03',
						name: '王佳',
						address: '甘肃省天水市麦积区 100 弄'
					},
					{
						number: 8,
						date: '2020-10-23',
						name: '王圆圆',
						address: '甘肃省天水市麦积区 1200 弄'
					},
					{
						number: 9,
						date: '2013-07-03',
						name: '赵方',
						address: '甘肃省天水市麦积区 2323 弄'
					}
				]
			}
		},
		methods: {
			//定义导出Excel表格事件
			exportExcel() {
				let xlsxParam = { raw: true }
				let wb = XLSX.utils.table_to_book(
					document.querySelector('#table'),
					xlsxParam
				)
				/* 获取二进制字符串作为输出 */
				let wbout = XLSX.write(wb, {
					bookType: 'xlsx',
					bookSST: true,
					type: 'array'
				})
				try {
					FileSaver.saveAs(
						new Blob([wbout], { type: 'application/octet-stream' }),
						//设置导出文件名称
						'ryxi.xlsx'
					)
				} catch (e) {
					if (typeof console !== 'undefined') console.log(e, wbout)
				}
				return wbout
			}
		}
	}
</script>

<style lang="css" scoped>
	.div {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-bottom: 0.5rem;
	}
	/*滚动条的宽度*/
	/deep/ .el-table__body-wrapper::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}
	/*滚动条滑块*/
	/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
		background-color: #ddd;
		border-radius: 3px;
	}
</style>
